<script>
import {useRouter,useRoute} from 'vue-router'
import { reactive, ref, toRefs } from 'vue';
import { areaList } from '@vant/area-data';
import { Toast } from 'vant';
import { useStore } from '../store';
    export default {
        setup() {
            let router=useRouter()
            let route=useRoute()
            let store=useStore()
            let dataFun=reactive({
                province:"省",
                city:"市",
                area:"区",
                user:"",
                phone:"",
                Detailedaddress:"",
                id:0,
                add:null,
            })
             // 是否为默认
            const checked = ref(false);

            function getData(){

                dataFun.add=route.query.add
                // console.log(dataFun.add);
                if(dataFun.add=="1"){
                    dataFun.user=route.query.user
                    dataFun.phone=route.query.phone
                    dataFun.province=route.query.province
                    dataFun.city=route.query.city
                    dataFun.area=route.query.area
                    dataFun.Detailedaddress=route.query.Detailedaddress
                    checked.value=JSON.parse(route.query.defaulter)//字符串"false"变为false
                    dataFun.id=Number(route.query.addressid)
                }
            }
            getData()
            // 返回上一步
            let go=()=>{
                router.go(-1)
            }

           

            // 省市区选择弹框是否显示
            const show = ref(false);
            const showPopup = () => {
                show.value = true;
                console.log(areaList);
            };

            // 省市区选择弹框确认按钮
            let onConfirm=(value)=>{
                // console.log("完成",value);
                show.value = false;
                dataFun.province=value[0].name
                dataFun.city=value[1].name
                dataFun.area=value[2].name
            }
            
            // 省市区选择弹框取消按钮
            let onCancel=()=>{
                show.value=false
            }

            // 确认地址
            let determine=()=>{
                console.log(dataFun.add);
                    if(dataFun.user.length>=2 && dataFun.user.length<=15){
                       
                        if(dataFun.phone.length==11){
                            
                            if(dataFun.province!="省"){
                               
                                if(dataFun.Detailedaddress.length!=0){
                                    
                                    if(dataFun.add=="0"){
                                        store.address.forEach(item=>{
                                            item.check=false
                                        })
                                        
                                        if(checked.value==true){
                                            store.address.forEach(item=>{
                                                item.defaulter=false;
                                            })
                                            addressider(dataFun.id)
                                            store.address.unshift({
                                                user:dataFun.user,
                                                phone:dataFun.phone,
                                                province:dataFun.province,
                                                city:dataFun.city,
                                                area:dataFun.area,
                                                Detailedaddress:dataFun.Detailedaddress,
                                                defaulter:checked.value,
                                                check:true,
                                                addressid:dataFun.id
                                            })
                                        }else{
                                            addressider(dataFun.id)
                                            store.address.push({
                                                user:dataFun.user,
                                                phone:dataFun.phone,
                                                province:dataFun.province,
                                                city:dataFun.city,
                                                area:dataFun.area,
                                                Detailedaddress:dataFun.Detailedaddress,
                                                defaulter:checked.value,
                                                check:true,
                                                addressid:dataFun.id
                                            })
                                        }

                                    }else if(dataFun.add=="1"){
                                     
                                        let index=store.address.findIndex(item=>{
                                            return item.addressid==dataFun.id
                                        })
                                        console.log(index);
                                        store.address.forEach(item=>{
                                            item.check=false
                                        })
                                        if(checked.value==true){
                                            console.log("value",true);
                                            store.address.forEach(item=>{
                                                item.defaulter=false;
                                            })
                                            store.address.splice(index,1)
                                            store.address.unshift({
                                                user:dataFun.user,
                                                phone:dataFun.phone,
                                                province:dataFun.province,
                                                city:dataFun.city,
                                                area:dataFun.area,
                                                Detailedaddress:dataFun.Detailedaddress,
                                                defaulter:checked.value,
                                                check:true,
                                                addressid:dataFun.id
                                            })
                                        }else{
                                            console.log("value",false);
                                            store.address[index].user=dataFun.user
                                            store.address[index].phone=dataFun.phone
                                            store.address[index].province=dataFun.province
                                            store.address[index].city=dataFun.city
                                            store.address[index].area=dataFun.area
                                            store.address[index].Detailedaddress=dataFun.Detailedaddress
                                            store.address[index].defaulter=checked.value
                                            store.address[index].check=true
                                            store.address[index].addressid=dataFun.id
                                        }
                                    }
                                    go()
    
                                }else{
                                    Toast("详细地址不能为空喔")
                                }
                            }else{
                                Toast("省市区不能为空喔")
                            }
                        }else{
                            Toast("内地手机号码为11为数字喔")
                        }
                    }else{
                        Toast("姓名应为2-15个字喔")
                    }
                
            }

            // 用递归写出地址唯一的id
            function addressider(id){
               let ids= store.address.every(item=>{
                    return  item.addressid !=id
                })
                if(ids==true){
                    console.log("=1");
                  return dataFun.id=id
                }else{
                    console.log("+1");
                    dataFun.id+=1
                    return addressider(dataFun.id)
                }
            }
            
            
            return {
                ...toRefs(dataFun),
                go,
                areaList,
                show,
                showPopup,
                onConfirm,
                onCancel,
                checked,
                determine
            }
        },
    }
</script>


<template>
    <div class="AddAddress">
        <div class="wrapper">
            <div class="header">
                <div class="header_left">
                    <div class="icon_coo icon-a-ziyuan558" @click="go"></div>
                    <div class="head_name" v-if="add=='0'">新建收货地址</div>
                    <div class="head_name" v-else-if="add=='1'">修改收货地址</div>
                </div>
                <div class="header_right" @click="determine">确定</div>
            </div>

            <div class="info">
                <div class="name">
                    <input type="text" placeholder="收货人姓名" v-model="user">
                </div>
                <div class="name">
                    <input type="tel" maxlength="11" placeholder="手机号码" v-model="phone">
                </div>
                <div class="pop">
                    <van-cell is-link @click="showPopup">{{province}}/{{city}}/{{area}}</van-cell>
                    <van-popup
                        v-model:show="show"
                        round
                        position="bottom"
                        :style="{ height: '50%' }"
                    >
                        <van-area title="选择地址" :area-list="areaList"
                         value="110101"
                         @confirm=" onConfirm" 
                         @cancel="onCancel" />
                    </van-popup>
                </div>
                <div class="name">
                    <input type="text" placeholder="详细地址" v-model="Detailedaddress">
                </div>
            </div>

            <div class="switch">
                <van-cell center title="设置为默认地址">
                    <template #right-icon>
                        <van-switch v-model="checked" size="24" />
                    </template>
                </van-cell>
            </div>
        </div>
    </div>
</template>


<style lang="scss" scoped>
.AddAddress{
    .wrapper{
         .header{
            position: fixed;
            left: 0;
            top: 0;
            background-color: #fff;
            z-index: 1;
            width: 100%;
            // padding: 0 12px;
            height: 50px;
            border-bottom: 1px solid rgb(248, 235, 207);
            display: flex;
            align-items: center;
            justify-content: space-between;
            .header_left{
                font-size: 18px;
                padding-left: 16px;
                display: flex;
                align-items: center;
                // .icon-a-ziyuan558{}
                .head_name{
                    font-weight: 600;
                    font-size: 18px;
                    padding-left: 30px;
                }
            }
            .header_right{
                padding-right: 16px;
                color: rgb(16, 198, 44);
                font-size: 14px;
            }
        }
        .info{
            padding: 52px 16px 0;
            // color: #999;
            .name{
                input{
                    width: 100%;
                    border: none;
                    // background-color: beige;
                    height: 40px;
                    border-bottom: 1px solid #ddd;
                    font-size: 14px;

                }
            }
            .pop{
                .van-cell{
                    padding: 0;
                    height: 40px;
                    align-items: center;
                    border-bottom: 1px solid #ddd;
                }
            }
        }
        .switch{
            margin-top: 20px;
        }
    }
}
</style>